<template>
    <div class='app-container' width="100%">
        <el-form :model="tableForm" class="demo-ruleForm" style="width: 100%" >
            <el-table :data="tableForm.tableData" border style="width: 100%" class="graphPropTable">
                <el-table-column prop="propLabel" label="属性" style="width: 10%;" height="20">
                </el-table-column>
                <el-table-column prop="propValue" label="值" style="width: 90%;"  height="20">
                    <template #default="scope">
                        <el-form-item :prop="'tableData.' + scope.$index + '.propName'">
                            <el-input-number v-if="graphPropDef[scope.row.propName]['vtype'] == ptlistType"
                                :min="graphPropDef[scope.row.propName]['range']['min']"
                                :max="graphPropDef[scope.row.propName]['range']['max']" controls-position="right"
                                size="large" v-model="selIndx" @change="onSelChgArr($event, scope.row.propName)"
                                style="width: 100%">
                            </el-input-number>

                            <el-input v-if="graphPropDef[scope.row.propName]['vtype'] == ptlistType"
                                v-model="subItem[scope.row.propName]['x']"
                                @change="onSelChgSubProp($event, scope.row.propName, 'x')" style="width: 100%">x
                            </el-input>
                            <el-input v-if="graphPropDef[scope.row.propName]['vtype'] == ptlistType"
                                v-model="subItem[scope.row.propName]['y']"
                                @change="onSelChgSubProp($event, scope.row.propName, 'y')" style="width: 100%">x
                            </el-input>

                            <el-input-number v-if="graphPropDef[scope.row.propName]['vtype'] == singleType"
                                :min="graphPropDef[scope.row.propName]['range']['min']"
                                :max="graphPropDef[scope.row.propName]['range']['max']" controls-position="right"
                                size="large" v-model="scope.row.propValue"
                                @change="onSelChgSingleProp($event, scope.row.propName)" style="width: 100%">
                            </el-input-number>

                            <el-input v-if="graphPropDef[scope.row.propName]['vtype'] == ptType"
                                v-model="subItem[scope.row.propName]['x']"
                                @change="onSelChgSubProp($event, scope.row.propName, 'x')" style="width: 100%">
                            </el-input>
                            <el-input v-if="graphPropDef[scope.row.propName]['vtype'] == ptType"
                                v-model="subItem[scope.row.propName]['y']"
                                @change="onSelChgSubProp($event, scope.row.propName, 'y')" style="width: 100%">
                            </el-input>

                        </el-form-item>
                    </template>
                </el-table-column>
            </el-table>
        </el-form>
    </div>
</template>
<script setup>
import { ref, onMounted, onUpdated, onActivated } from 'vue'
import globalConst from '../../script/canvas/common/globalConst';
var global = globalConst.GlobalConst
const ptlistType = ref(global.PtList_CoordType)
const ptType = ref(global.Pt_CoordType)
const singleType = ref(global.Single_CoordType)

//图形属性定义json例子
var defaultCoordDatas = function () {
    let graphPropDef = {
        ptlst: {
            vtype: global.PtList_CoordType,
            range: { min: 1, max: 30 },
        },
        leftBottom: {
            vtype: global.Pt_CoordType,
            range: { min: 1, max: 300 },
        },
        width: {
            vtype: global.Single_CoordType,
            range: { min: 1, max: 300 },
        }
    };

    let tableForm = {
        tableData: [
            {
                propName: 'ptlst',
                propLabel: 'pt',
                propValue: [{ x: 10, y: 20 }, { x: 100, y: 20 }]
            },
            {
                propName: 'leftBottom',
                propLabel: 'lb',
                propValue: { x: 10, y: 20 }
            },
            {
                propName: 'width',
                propLabel: 'W',
                propValue: 200
            }
        ]
    };
    return { graphPropDef, tableForm };
}

const graphPropDef = ref({})//图形坐标属性定义
const tableForm = ref({ tableData: [] });//图形坐标数据，从画布中实时获取
const selIndx = ref(0)//多顶点坐标参数中，当前选中的顶点索引，从1开始

//坐标数据类型为“ptlist”或“pt”时，用subItem来暂存当前编辑选中的坐标点数据并渲染到界面上
const subItem = ref(null)
//样例数据
// let v1 = {
//     ptlst: { x: 21, y: 20 },
//     leftBottom: { x: 21, y: 20 }
// };
// subItem.value = v1;

var onSelChgSingleProp = function (item, propName) {
    console.log("onSelChgSingleProp:"+item + propName + "............................");
    let propVal = getPropValue(propName, tableForm.value.tableData);
    console.log("pre:");
    console.log(propVal);
  
    propVal = parseFloat(item);
    console.log("curent:");
    console.log(propVal);
    var cmd = { propName, propVal };
    window.mainctl.m_pEditINTF.modifyCoordDatas(cmd);
}

var onSelChgArr = function (item, prop) {
    console.log("onSelChgArr  " + item + prop + "............................");
    let idx = parseInt(item);
    let propVal = getPropValue(prop, tableForm.value.tableData);
    let pt = propVal[idx - 1];
    subItem.value[prop].x = pt.x;
    subItem.value[prop].y = pt.y;
}

var onSelChgSubProp = function (item, propName, subProp) {
    console.log("onSelChgSubProp  " + item + " " + propName + "  " + subProp + "............................");

    let idx = parseInt(selIndx.value);
    let propVal = getPropValue(propName, tableForm.value.tableData);
    console.log("pre:");
    console.log(propVal);
    let propValType = getPropType(propName);
    if (propValType == "ptlist") {
        propVal[idx - 1][subProp] = parseFloat(subItem.value[propName][subProp]);
    }
    else if (propValType == "pt") {
        propVal[subProp] = parseFloat(subItem.value[propName][subProp]);
    }
    console.log("curent:");
    console.log(propVal);
    var cmd = { propName, propVal };
    window.mainctl.m_pEditINTF.modifyCoordDatas(cmd);
}


var getPropValue = function (key, dataArr) {
    let rst = null;
    for (let idx in dataArr) {
        let item = dataArr[idx];
        if (item["propName"] == key) {
            rst = item["propValue"];
        }
    }
    return rst;
}

var getPointInitVal = function (key, type, dataArr) {
    let x = 0;
    let y = 0;
    for (let idx in dataArr) {
        let item = dataArr[idx];
        if (item["propName"] == key) {
            if (type == "pt") {
                x = item["propValue"].x;
                y = item["propValue"].y;
            }
            else if (type == "ptlist") {
                let p0 = item["propValue"][0];
                x = p0.x;
                y = p0.y;
            }
        }
    }
    return { x, y };
}

var getPropType = function (propName) {
    let type = "";
    let obj = graphPropDef.value;
    for (let key in obj) {
        if (key == propName) {
            type = obj[key].vtype;
            break;
        }
    }
    return type;
}

//初始化数据，从当前选中图形中获取坐标定义及真实数据
var initDatas = function () {
    console.log("initDatas*******************");
    let rst = window.mainctl.m_pGetDataINTF.getCoordDatas(0);
    if (!rst){
        return ;
    }
    graphPropDef.value = rst.graphPropDef;
    tableForm.value = rst.tableForm;
    initSubItemDatas();
    correctGraphPropDefRange();
}

var initSubItemDatas = function () {
    let v = {};
    let obj = graphPropDef.value;
    console.log(obj);
    for (let key in obj) {
        console.log(key + ":" + obj[key]);
        if (obj[key].vtype == "ptlist" || obj[key].vtype == "pt") {
            let pt = getPointInitVal(key, obj[key].vtype, tableForm.value.tableData);
            v[key] = pt;
        }
    }
    subItem.value = v;
}

var correctGraphPropDefRange = function () {
    let obj = graphPropDef.value;
    console.log(obj);
    for (let key in obj) {
        if (obj[key].vtype == "ptlist") {
            let propValArr = getPropValue(key, tableForm.value.tableData);
            let ptcount = propValArr.length;
            obj[key].range = { min: 1, max: ptcount };
        }
    }
}

defineExpose({
    graphPropDef,
    tableForm,
    initDatas,
    selIndx
});
</script>

<style scoped>
.label-item{
    color:green;
  }
</style>
  